<template>
    <view class="canvas-box">
		<u-navbar title="邀请推广" title-color="#fff" :background="background" :border-bottom="false" back-icon-color="#fff"></u-navbar>
        <!-- 导航栏 -->
        <!-- <view class="nav-box">
            <view class="title-top" :style="'padding-top:' + statusBarHeight + 'rpx'">
                <u-icon class="title-icon" name="arrow-left" color="#ffffff" size="36" @click="getBack"></u-icon>
                <text>海报分享</text>
            </view>
        </view> -->
        
        <!-- 开发完成之前，取消 fixed;opacity: 0;-->
        <canvas style="width: 346px;height: 500px;position: fixed;opacity: 0;" class="canvas" canvas-id="canvasID"></canvas>
        <!-- 完成海报制作后，需要把canvas移到看不见的地方，或者隐藏，把image显示出来 -->
        <image :src="imgUrl" mode=""></image>

        <view class="footer">
            <view class="download" @click="saveImage">
                <!-- 小于符号图标 -->
                <u-icon name="download" color="#ffffff" size="34"></u-icon>
                <text>保存到相册</text>
            </view>
			
			<view class="download" style="margin-left: 20rpx;">
				<!-- <button style="border: none; color: #fff; font-size: 30rpx; width: 100%; height: 100%; padding: 0;" plain="true"
					type="default" open-type="share" @ShareAppMessage="onShareAppMessage(res)"> -->
					<view class="" @click="share" style="display: flex;">
						<u-icon :name="getStaticFilePath('/home/nav/nav-FX.png')"
							:size="50">
						</u-icon>
						<text style="padding-left:10rpx;">分享给好友</text>
					</view>
				<!-- </button> -->
			</view>
			
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				userinfo: JSON.parse(uni.getStorageSync('userinfo')),
				yqObj:{},
                imgUrl: '',
                statusBarHeight: 0,
				background: {
					backgroundColor: '#1ABC9C',
				},
                avatar: '../../static/images/fadanren.png', //头像地址
                hello: 'https://feishazoushi.cn/appImages/downCustomer.png', // hello图标
                mony: '../../static/images/fadanren.png' //圆的钱图标
            }
        },
		
        created() {
           uni.getSystemInfo().then(res => {
                this.statusBarHeight = res
            })
        },
        mounted() {
          
        },
        methods: {
            getBack() {
                uni.navigateBack({
                    delta: 1
                });
            },
			
			share(res) {
				// console.log(res.ORMTB460ID)
				// return
				let that = this;
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					imageUrl: 'https://feishazoushi.cn/appImages/logo.png',
					title: '我为飞砂走石代盐,邀请好友注册赚钱！',
					miniProgram: {
						id: 'gh_fa047443538a',
						path: 'pages/APPlogin/index?fxtgID=' + encodeURIComponent(this.yqObj.PERTB007CA00),
						type: 0, //0-正式版；1-测试版；2-体验版。默认值0
						webUrl: 'https://feishazoushi.cn/gw/'
					},
					success: function(ret) {
			
						console.log(JSON.stringify(ret));
					},
					fail: function(fail) {
						console.log(fail)
					}
			
				});
			
			},
			
			getyqmFun(){
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				uni.request({
					url: this.baseUrl + '/per/pertb007/getInviteCode',
					method: 'POST',
					dataType: 'json',
					data: {
						"ORMTB410ID": this.userinfo.ORMTB410ID //二级客户iD
					},
					success: (res) => {
						console.log(res);
						uni.hideLoading();
						if (res.data.code == 200) {
							this.yqObj = res.data.data
							this.cavnvasYQMFun()
						} else {
							uni.showToast({
								title: res.data.message,
								type: 'default',
								icon: false
							})
						}
					},
					fail: (res) => {
						uni.hideLoading();
						uni.showToast({
							title: res.errMsg,
							type: 'default',
							icon: false
						})
					}
				});
			},
			cavnvasYQMFun(){
				let ctx = uni.createCanvasContext('canvasID', this);
				// ctx.setFillStyle("transparent"); //设置canvas背景颜色
				// ctx.fillRect(0, 0, 346, 500) //设置canvas画布大小
				this.fillRoundRect(ctx, 0, 0, 346, 500, 15); //绘制一个圆角矩形
				this.fillRoundRect(ctx, 0, 0, 346, 182, 15, '#333231'); //绘制一个圆角矩形
				this.drawCircular(ctx, this.avatar, 36, 32, 50, 50) //绘制圆形头像
				
				ctx.setFontSize(18)
				ctx.setFillStyle("#ffffff")
				ctx.fillText(this.yqObj.PERTB007CA02, 98, 65)
				// ctx.drawImage(this.hello, 240, 10, 86, 86) //二维码
				ctx.font = '20px normal'
				ctx.setFillStyle("#09CFB1")
				ctx.fillText('我为“飞砂走石”带盐', 30, 122)
				ctx.font = '16px normal'
				ctx.setFillStyle("#ffffff")
				ctx.fillText('“邀请好友注册赚钱”', 20, 152)
				
				// 绘制职位标题，多余文字自动换行
				ctx.setFontSize(15)
				ctx.setFillStyle("#333333")
				
				let str = '1.扫码下载'
				// 字符串总长度
				let _strLength = str.length
				// 总结截取次数
				let _strNum = Math.ceil(_strLength / 9)
				
				// 每次开始截取字符串的索引
				let _strHeight = 0
				// 绘制的字体 x,y的初始位置
				let _strX = 27,
				    _strY = 223
				let strIndex = 223
				// 开始截取
				for (let i = 0; i < _strNum; i++) {
				    strIndex = _strY + i * 40
				    ctx.fillText(str.substr(_strHeight + i * 9, 9), _strX, _strY + i * 40)
				}
				strIndex += 28
				ctx.setFontSize(15)
				ctx.setFillStyle("#333333")
				let strtitle = '2.下载完成输入邀请码完成注册'
				ctx.fillText(strtitle, _strX, strIndex)
				
				 
				ctx.setFontSize(15)
				ctx.setFillStyle("#333333")
				ctx.fillText('3.被邀请人每下一单邀请人获得10元奖励', _strX, 280)
				
				ctx.setFontSize(15)
				ctx.setFillStyle("#333333")
				ctx.fillText('4.邀请人最多获得被邀请人的前十单奖励', _strX, 310)
				
				ctx.setFontSize(20)
				ctx.setFillStyle("#333231")
				ctx.fillText('您的专属邀请码', _strX, 418)
				
				// this.drawCircular(ctx, this.mony, _strX, 429, 14, 14) //绘制圆形头像
				ctx.setFontSize(25)
				ctx.setFillStyle("#F7BA65")
				ctx.fillText(this.yqObj.PERTB007CA00, _strX + 25, 460)
				
				// 绘制微信二维码
				ctx.drawImage(this.hello, 208, 330, 120, 120) //二维码
				ctx.setFontSize(15)
				ctx.setFillStyle("#333231")
				ctx.fillText('扫码下载', 240, 480)
				
				ctx.draw(false, () => {
				    // 返回canvas图片信息
				    uni.canvasToTempFilePath({
				        canvasId: 'canvasID',
				        success: (res) => {
				            this.imgUrl = res.tempFilePath
				            // console.log(res.tempFilePath)
				        },
				        fail: function(err) {
				            console.log(err)
				        }
				    })
				})
			},
            saveImage() { //点击保存
                var _this = this;
                uni.saveImageToPhotosAlbum({
                    filePath: _this.imgUrl,
                    success() {
                        uni.showModal({
                            title: "保存成功",
                            content: "图片已成功保存到相册，快去分享到您的圈子吧",
                            showCancel: false
                        })
                    }
                })
            },
            // 将网络图片转为临时图片地址
            async getImageInfo({imgSrc}) {
                return new Promise((resolve, errs) => {
                    uni.downloadFile({
                        src: imgSrc,
                        success: function(image) {
                            resolve(image);
                        },
                        fail(err) {
                            errs(err);
                        }
                    });
                });
            },
            // 绘制圆形头像
            drawCircular(ctx, url, x, y, width, height) {
                //画圆形头像
                var avatarurl_width = width;
                var avatarurl_heigth = height;
                var avatarurl_x = x;
                var avatarurl_y = y;
                ctx.save(); //先保存状态，已便于画完园再用
                ctx.beginPath(); //开始绘制
                ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math
                    .PI * 2, false);
                ctx.setFillStyle("#FFFFFF")
                ctx.fill() //保证图片无bug填充
                ctx.clip(); //剪切
                ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); //推进去图片
                ctx.restore();
            },
            // 绘制带圆角的矩形方法
            fillRoundRect(cxt, x, y, width, height, radius,  fillColor) {
                //圆的直径必然要小于矩形的宽高
                if (2 * radius > width || 2 * radius > height) {
                    return false;
                }

                cxt.save();
                cxt.translate(x, y);
                //绘制圆角矩形的各个边
                this.drawRoundRectPath(cxt, width, height, radius);
                cxt.fillStyle = fillColor || '#fff'; //若是给定了值就用给定的值否则给予默认值
                cxt.fill();
                cxt.restore();
            },
            drawRoundRectPath(cxt, width, height, radius) {
                cxt.beginPath(0);
                //从右下角顺时针绘制，弧度从0到1/2PI
                cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

                //矩形下边线
                cxt.lineTo(radius, height);

                //左下角圆弧，弧度从1/2PI到PI
                cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

                //矩形左边线
                cxt.lineTo(0, radius);

                //左上角圆弧，弧度从PI到3/2PI
                cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);

                //上边线
                cxt.lineTo(width - radius, 0);

                //右上角圆弧
                cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);

                //右边线
                cxt.lineTo(width, height - radius);
                cxt.closePath();
            }
        },
		onLoad() {
			this.getyqmFun()
		}
    }
</script>

<style lang="scss" scoped>
    .canvas-box {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #1ABC9C;
		padding: 0 20rpx;

        /deep/.nav-box {
            width: 100%;
            padding: 0 20rpx;
            position: absolute;
            z-index: 9999;
            top: 0;
            left: 0;

            .title-top {
                font-size: 36rpx;
                font-weight: 550;
                color: #FFFFFF;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                margin-bottom: 30rpx;

                .title-icon {
                    position: absolute;
                    left: 0;
                }
            }
        }

        image {
            width: 335px;
            height: 500px;
        }

        .footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: absolute;
            justify-content: center;
            padding: 0 40rpx;
            width: 100%;
            left: 0;
            bottom: 5%;

            .download {
                border: 1rpx solid #ffffff;
                color: #ffffff;
                display: flex;
                align-items: center;
            }

            view {
                padding: 0 20rpx;
                height: 78rpx;
                text-align: center;
                line-height: 78rpx;
                font-size: 30rpx;
                border-radius: 36rpx;
            }
        }
    }
</style>